import React, { Component, createRef } from 'react';
import {  Button,Form, Input, Select, message,Modal,Tooltip} from 'antd';
import Model from '@/model/common'
import {withRouter} from 'react-router-dom'

const layout = {
    labelCol: {
      span: 8,
    },
    wrapperCol: {
      span: 16,
    },
  };
  const tailLayout = {
    wrapperCol: {
      offset: 8,
      span: 16,
    },
  };
const { Option } = Select;
class Update extends Component {
  constructor(props){
    super(props)
    this.ref_username = createRef()
    this.ref_password = createRef()
    this.ref_email = createRef()
    this.ref_gender = createRef()
    this.ref_mobile = createRef()
  }
  state = {
    loading:false,
  }
    render() {
      let data=this.props.sentuserInfo
      console.log(data);
      console.log(this.props.sendRender);
        return (
            <div>
                     <Form 
                {...layout}
                name="basic"
                initialValues={{
                  remember: true,
                },data}
                onFinish={this.onFinish}
                onFinishFailed={this.onFinishFailed}
              >
                <Tooltip placement="topLeft" title="至少输入五个无限制字符！" arrowPointAtCenter>
                <Form.Item
                  label="用户名"
                  name="username"
                  // initialValue={data.username}
                  rules={[
                    {
                      required: true,
                      message: '请输入你的昵称！',
                    },
                    {
                      pattern:/^.{5,}$/,
                      message:"格式不正确！"
                    }
                  ]}
                >
                  <Input ref={this.ref_username}/>
                </Form.Item>
                </Tooltip>
                <Tooltip placement="topLeft" title="要符合邮箱规则" arrowPointAtCenter>
                <Form.Item
                    name={'email'}
                    label="邮箱"
                    // initialValue={data.email}
                    rules={[
                      {
                        required: true,
                        type: 'email',
                        message: '请输入你的邮箱！',
                        
                      },{
                        pattern:/^[^_$].{6,}@(163|126|qq|sina|QQ|gmail|sohu|yahoo|hotmail)\.(com|cn|net|COM|CN|NET)$/,
                        message:"格式不正确！"
                      }
                    ]}
                  >
                    <Input  ref={this.ref_email}/>
                  </Form.Item>
                  </Tooltip>
                  <Form.Item
                    name="gender"
                    label="性别"
                    // initialValue={data.gender}
                    rules={[
                      {
                        required: true,
                        message: '请选择性别！',
                      },
                    ]}
                  >
                    <Select placeholder="请选择性别">
                      <Option value="1">男</Option>
                      <Option value="2">女</Option>
                      <Option value="3">保密</Option>
                    </Select>
                  </Form.Item>
                  <Tooltip placement="topLeft" title="手机号11位" arrowPointAtCenter>
                  <Form.Item
                    label="手机号码"
                    name="mobile"
                    // initialValue={data.mobile}
                    rules={[
                      {
                        required: true,
                        message: '请输入你的电话号码！',
                      },
                      {
                        pattern:/^1[3-8]{1}\d{9}$/,
                        message:"格式不正确！"
                      }
                    ]}
                  >
                    <Input />
                  </Form.Item>
                  </Tooltip>
                <Form.Item {...tailLayout}>
                  <Button type="primary" htmlType="submit" block loading={this.state.loading}>
                    修改
                  </Button>
                </Form.Item>
              </Form>  
            </div>
        );
    }
    onFinish = (values) => {
          console.log(values);       
          let id=this.props.sendId 
          console.log(id);
          values['id'] = id
          console.log(values);
          Model.update_users(values).then(ret=>{
            console.log(ret);
            if(ret.errNo===0){
              this.setState(()=>{
                return {
                  loading:true
                }
              })
              message.success('修改成功！两秒后跳转到用户列表',2,()=>{
                this.props.getisshow(false)
              })
            }
            else {
              for(var key in ret.errorBag){
              Model.fanyi(`?info=${ret.errorBag[key]}`).then(ret=>{
                console.log(ret.fanyi);
                message.error(ret.fanyi)
              })
              }
              
            }
          })
      };
    
      onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
      };
}

export default withRouter(Update);
